<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">
	<style type="text/css">
<!--
.tab-nav {
	font-size: 15px;
	font-weight: bolder;
	height: 30px;
	background-color: rgb(212, 233, 249);
	color: #3689ce;
	overflow: hidden;
}

.tab-nav a:hover {
	background-color: red;
}

.tab-nav ul {
	margin-top: 6px;
}

.tab-nav ul li {
	display: block;
	float: left;
}

.tab-nav ul li a {
	padding: 0 10px;
	text-decoration: none;
}

.tab-content {
	height: 210px;
	font-size: 13px;
	display: none;
	overflow: hidden;
}
-->
</style>
<h:outputScript library="theme" name="js/common.js" />
	<div style="margin: 5px 2px 5px 0;" onmouseover="onMouseContentOver()"
		onmouseout="onMouseContentOut()">
		<ui:repeat value="#{newsAction.hots}" var="hot" varStatus="status">
			<div id="tabid#{status.index}" class="tab-content">
				<h3>#{hot.name}</h3>
				<img src="#{hot.imageUrl}" alt="#{hot.name}"
					style="display: block; float: right; height: 140px; width: 250px; margin-top: -30px;" />
				<p>#{hot.content}</p>
			</div>
		</ui:repeat>
		<div class="tab-nav">
			<ul>
				<li id="liida"><a href="#">&lt;</a>
				</li>
				<ui:repeat value="#{newsAction.hots}" var="hot" varStatus="status">
					<li id="liid#{status.index}"><a href="#"
						onclick="tabshow(#{status.index})">#{status.index+1}</a>
					</li>
				</ui:repeat>
				<li id="liidb"><a href="#">&gt;</a>
				</li>
			</ul>
		</div>
	</div>
	
	<script language="javascript">
	<!--
	    var n = 0;
	    var loopId=setInterval("autoshow()", 2000);	    
	    document.getElementsByClassName("tab-content")[0].style.display = "block";
		function tabshow(n) {
			clearshow();
			document.getElementById("tabid"+n).style.display = "block";
			document.getElementById("liid"+n).setAttribute("style", "background-color: red");			
		}
		function clearshow() {
		   var elements = document.getElementsByClassName("tab-content");
		   for (var i = 0; i < elements.length; i++) {
		     var e = elements[i];
		     e.style.display = 'none';
		     document.getElementById("liid"+i).setAttribute("style", "background-color:");
		  }
		}
		function autoshow() {	
			if (n >= document.getElementsByClassName("tab-content").length) {
				n = 0;
			}
			tabshow(n);
			n++;
		}
		function onMouseContentOver() {
			clearInterval(loopId);
		}
		function onMouseContentOut() {
			loopId=setInterval("autoshow()", 2000);
		}
		-->
	</script>
</ui:composition>